<template>
  <div id="chartId" class="chart-container"></div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

// 接收父组件传递的属性
const props = defineProps({
  dateRange: {
    type: Array,
    default: []
  },
  sensorData: {
    type: String,
    default: '0'
  }
})

// 获取传感器类型对应的中文名称
const getSensorTypeName = (sensorType: string): string => {
  const sensorMap: Record<string, string> = {
    '0': '温度',
    '1': '湿度',
    '2': '风速'
  }
  return sensorMap[sensorType] || '未知数据'
}

// 获取传感器对应的数据单位
const getSensorUnit = (sensorType: string): string => {
  const unitMap: Record<string, string> = {
    '0': '°C',
    '1': '%',
    '2': 'm/s'
  }
  return unitMap[sensorType] || ''
}

// 图表实例
let chartInstance: echarts.ECharts | null = null

// 初始化图表
const initChart = () => {
  const chartDom = document.getElementById('chartId')
  if (!chartDom) return

  // 销毁已存在的实例
  if (chartInstance) {
    chartInstance.dispose()
  }

  chartInstance = echarts.init(chartDom)

  // 生成数据 (模拟接口数据，实际这里是调用接口)
  const generateChartData = () => {
    const dates: string[] = []
    const values: number[] = []
    
    // 根据传入的日期范围生成数据
    if (props.dateRange && props.dateRange.length === 2) {
      // 如果有传入日期范围，使用传入的范围
      const startDate = new Date(props.dateRange[0])
      const endDate = new Date(props.dateRange[1])
      
      // 计算日期范围内的天数
      const days = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1
      
      // 生成日期范围内的数据
      for (let i = 0; i < days; i++) {
        const currentDate = new Date(startDate)
        currentDate.setDate(startDate.getDate() + i)
        
        // 格式化日期为YYYY-MM-DD
        const year = currentDate.getFullYear()
        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0')
        const day = currentDate.getDate().toString().padStart(2, '0')
        dates.push(`${year}-${month}-${day}`)
        
        // 根据传感器类型生成不同范围的随机值
        switch (props.sensorData) {
          case '0': // 温度
            values.push(Math.floor(Math.random() * 30) + 10) // 10-40°C
            break
          case '1': // 湿度
            values.push(Math.floor(Math.random() * 60) + 20) // 20-80%
            break
          case '2': // 风速
            values.push(Math.floor(Math.random() * 10) + 1) // 1-11m/s
            break
          default:
            values.push(Math.floor(Math.random() * 50) + 5)
        }
      }
    } else {
      // 如果没有传入日期范围，生成过去7天的数据
      const now = new Date()
      for (let i = 6; i >= 0; i--) {
        const date = new Date(now)
        date.setDate(date.getDate() - i)
        
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        dates.push(`${year}-${month}-${day}`)
        
        // 根据传感器类型生成不同范围的随机值
        switch (props.sensorData) {
          case '0': // 温度
            values.push(Math.floor(Math.random() * 30) + 10)
            break
          case '1': // 湿度
            values.push(Math.floor(Math.random() * 60) + 20)
            break
          case '2': // 风速
            values.push(Math.floor(Math.random() * 10) + 1)
            break
          default:
            values.push(Math.floor(Math.random() * 50) + 5)
        }
      }
    }
    
    return { dates, values }
  }

  const { dates, values } = generateChartData()
  console.log(dates, '======dates======');
  console.log(values, '======values======');
  const sensorTypeName = getSensorTypeName(props.sensorData)
  const sensorUnit = getSensorUnit(props.sensorData)

  // 图表配置
  const option: echarts.EChartsOption = {
    // title: {
    //   text: `${sensorTypeName}数据趋势`,
    //   left: 'center'
    // },
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        const param = params[0]
        return `
          <div style="padding: 10px;">
            <div style="font-weight: bold;">${param.seriesName}</div>
            <div>日期: ${param.name}</div>
            <div>数值: ${param.value}${sensorUnit}</div>
          </div>
        `
      }
    },
    legend:{
        data:[sensorTypeName]
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        interval: 0,
        rotate: 45, // 增加旋转角度以便更好地显示较长的标签
        formatter: (value: string) => {
          // 格式化显示为月-日 时-分
          const date = new Date(value)
          // return `${date.getMonth() + 1}-${date.getDate().toString().padStart(2, '0')}`
          return `${date.getMonth() + 1}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
        }
      }
    },
    yAxis: {
      type: 'value',
      interval: 5, // y轴间隔为5
      axisLabel: {
        formatter: `{value}${sensorUnit}`
      }
    },
    series: [
      {
        name: sensorTypeName,
        data: values,
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 3
        },
        itemStyle: {
          color: '#409EFF'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(64, 158, 255, 0.5)'
            },
            {
              offset: 1,
              color: 'rgba(64, 158, 255, 0.1)'
            }
          ])
        }
      }
    ],
    grid: {
      left: '2%',
      right: '3%',
      bottom: '25%', // 增加底部边距以便更好地显示较长的标签
      containLabel: true
    }
  }

  chartInstance.setOption(option)
}

// 响应式调整图表大小
const handleResize = () => {
  chartInstance?.resize()
}

// 监听属性变化，重新生成图表
watch(
  [() => props.dateRange, () => props.sensorData],
  () => {
    // 延迟执行，确保DOM更新完成
    setTimeout(() => {
      initChart()
    }, 50)
  },
  { deep: true }
)

// 组件挂载时初始化图表
onMounted(() => {
  // 延迟初始化，确保DOM元素已渲染
  setTimeout(() => {
    initChart()
  }, 50)

  // 添加窗口大小改变监听
  window.addEventListener('resize', handleResize)
})

// 组件卸载时清理资源
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 400px;
  margin-top: 20px;
}
</style>